<template>
	<view class="mineBox">
		<view class="contentBox">
			<image class="w100" src="../../static/images/bg1.jpg" mode="widthFix"></image>
			<view class="" :style="'height:'+contentTop+'px;'"></view>
			<view class="authBox">
				<view class="imgBox posRelative" @click="uploadAvatar">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
					<image v-else src="/static/images/f.png" mode=""></image>
					<view v-if="islogin" class="posAbsort" style="top: -10rpx;right: -10rpx;">
						
						<uv-icon name="edit-pen-fill" size="20" color="#3F7865"></uv-icon>
						
					</view>
				</view>
				<view class="personInfo flex1">
					<view class="nickText align-center" @click="login">
						{{userInfo.nickname||'未登录'}}
						
						<view class="userGrade align-center" style="background: #FDA777;padding-right: 10rpx;" v-if="userRole.jiaose_id=='1'">
							<image src="/static/images/7.png " style="margin-left: -20rpx;" mode=""></image>
							<text>{{userRole.jiaose_name}}</text>
						</view>
						<view class="userGrade align-center" v-if="userRole.jiaose_id=='2'">
							<image src="/static/images/6.png" mode=""></image>
							<text>{{userRole.jiaose_name}}</text>
						</view>
						<view class="userGrade align-center" v-if="userRole.tuijian_status=='2'">
							<image src="/static/images/6.png" mode=""></image>
							<text>推荐人</text>
						</view>
					</view>
					<view class="nameText">
						{{userInfo.mobile||''}}
					</view>
				</view>
				<view v-if="islogin" class="mr15 mt5 posRelative" style="display: flex;align-items: flex-start;" @click="tonotice('/pages/notice/index')">
					<uv-icon name="bell" size="22"></uv-icon>
					<text v-if="notices" class="newMes posAbsort"></text>
					通知
				</view>
			</view>
			<view class="Commission" v-if="userRole.tuijian_status==2">
				<view class="title">
					提成金额
				</view>
				<view class="justify-end align-center">
					<view class="flex1">
						￥{{price||'0.00'}}
					</view>
					<view class="action" @click="toTx">
						申请提现
					</view>
					<view class="action " @click="toRecharge">
						金额明细
					</view>
				</view>
			</view>
			<view class="bgWhite cardBox posRelative" v-if="userRole.wanghong_status==2">
				<view class="title align-center justify-between">
					我的订单
					<view class="align-center " style="font-size: 25rpx;color: #323232;margin-right: 35rpx;"
						@click="toOrder(1)">
						全部订单 <uv-icon name="arrow-right" color="#323232" size="12"></uv-icon>
					</view>
				</view>
				<view class="justify-between align-center">
					<view class="cardItem" @click="toOrder(6)">
						<image src="/static/images/wd7.png" mode=""></image>
						<text>待审核</text>
					</view>
					<view class="cardItem" @click="toOrder(2)">
						<image src="/static/images/wd9.png" mode=""></image>
						<text>代付中</text>
					</view>
					<view class="cardItem" @click="toOrder(5)">
						<image src="/static/images/wd10.png" mode=""></image>
						<text>已取消</text>
					</view>
					
					<view class="cardItem" @click="toOrder(4)">
						<image src="/static/images/wd8.png" mode=""></image>
						<text>已违约</text>
					</view>
					
					
				</view>
			</view>
			<view class="bgWhite cardBox posRelative" v-if="userRole.gys_status==2">
				<view class="title align-center justify-between">
				我的网红订单
					<view class="align-center " style="font-size: 25rpx;color: #323232;margin-right: 35rpx;"
						@click="towhOrder(1)">
						全部订单 <uv-icon name="arrow-right" color="#323232" size="12"></uv-icon>
					</view>
				</view>
				<view class="justify-between align-center">
					<view class="cardItem" @click="towhOrder(6)">
						<image src="/static/images/wd7.png" mode=""></image>
						<text>待审核</text>
					</view>
					<view class="cardItem" @click="towhOrder(2)">
						<image src="/static/images/wd8.png" mode=""></image>
						<text>代付中</text>
					</view>
					<view class="cardItem" @click="towhOrder(5)">
						<image src="/static/images/wd9.png" mode=""></image>
						<text>已取消</text>
					</view>
					<view class="cardItem" @click="towhOrder(4)">
						<image src="/static/images/wd10.png" mode=""></image>
						<text>已违约</text>
					</view>
			
				</view>
			</view>
			<view class="bgWhite cardBox posRelative" style="height: auto;" v-if="islogin">
				<view class="title">
					我的服务
				</view>
				<view class="justify-start align-center flex-wrap">
					<block v-for="(i,n) in menuList" :key="n">
						<button open-type="contact" v-if="i.status==2" class="cardItem mb18" @contact="contact">
							<image :src="i.img" mode="widthFix"></image>
							<text>{{i.title}}</text>
						</button>
						<view class="cardItem mb18" v-else @click="tourl(i)">
							<image :src="i.img" mode="widthFix"></image>
							<text>{{i.title}}</text>
						</view>

					</block>
				</view>
			</view>

		</view>


		<view class="shareCard ">
			<view class="shareItem" v-if="islogin" @click="to('/pages/referenceApply/index')">
				<image src="../../static/images/wd14.png" mode=""></image>
				<text>{{userRole.tuijian_anniu}}</text>
				<view class="">
						<text style="color: #999;" v-if="userRole.tuijian_status==3">(已拒绝，请重新提交)</text>
						
				</view>
			</view>
			<view class="shareItem" v-if="userRole.jiaose_id==1||userRole.jiaose_id==0" @click="toWh('/pages/whUserApply/index')">
				<image src="../../static/images/wd12.png" mode="widthFix"></image>
				<text>{{userRole.wanghong_status==2?'网红信息':"注册网红" }}</text>
				<view class="">
						<text style="color: #999;" v-if="userRole.wanghong_status==3">(已拒绝，请重新提交)</text>
						
				</view>
			</view>
			<view  class="shareItem" v-if="userRole.jiaose_id==2||userRole.jiaose_id==0" @click="toCHooseGoods('/pages/storeApply/index')">
				<image src="../../static/images/wd13.png" mode=""></image>
				<text>{{userRole.gys_status==2?'选品供应商信息':"注册选品商城商家" }}</text>
				<view class="">
						<text style="color: #999;" v-if="userRole.gys_status==3">(已拒绝，请重新提交)</text>
						
				</view>
			</view>
			<block v-if="!islogin">
		
				<view  v-for="(i,n) in navs" :key="n" class="shareItem"    @click="toregister(i)">
					<image :src="i.img" mode=""></image>
					<text>{{i.title}}</text>
					
				</view>
			</block>
			<block v-if="userRole.jiaose_id==0">
			<view  v-for="(i,n) in wonav" :key="n" class="shareItem"  v-if="i.status=='1'"  @click="showpop">
				<image :src="i.img" mode=""></image>
				<text>{{i.title}}</text>
				
			</view>
			</block>
			<block v-else>
			<view v-if="wonav[0].status=='1'&&userRole.gongyinglian_status=='1'" class="shareItem" @click="showpop">
				<image src="../../static/images/wd14.png" mode=""></image>
				<text>注册供应链商城商家</text>
			</view>
			<view v-if="wonav[0].status=='1'&&userRole.jinrong_status=='1'" class="shareItem" @click="showpop">
				<image src="../../static/images/wd15.png" mode=""></image>
				<text>注册供应链金融商家</text>
			</view>
			</block>
			<view class="shareItem" @click="toXy(2)">
				<image src="../../static/images/wd16.png" mode=""></image>
				<text>隐私协议</text>
			</view>
			<view class="shareItem" @click="toXy(3)">
				<image src="../../static/images/wd16.png" mode=""></image>
				<text>用户协议</text>
			</view>
			<button class=" justify-start align-center  " style="line-height: 1;height: 100%;font-size: 26rpx;border: none;" open-type="contact"   @contact="contact">
			<view class="shareItem" style="width: 100%;">
					<image src="/static/images/kfs.png" mode=""></image>
					<text>联系客服</text>
			</view>
			
			</button>
			<view class="shareItem" v-if="islogin" @click="toXyList">
				<image src="../../static/images/wd14.png" mode=""></image>
				<text>历史合同</text>
				
			</view>
		<!-- 	<view class="shareItem" @click="tonotice('/pages/notice/index')">
				<image src="../../static/images/notice.png" mode=""></image>
				<text>系统通知</text>
			</view> -->
			<view class="shareItem" v-if="islogin" @click="logout" style="border: none;">
				<image src="../../static/images/wd17.png" mode=""></image>
				<text>退出登录</text>
			</view>

		</view>
		<view class="zw" style="height: 50rpx;">

		</view>
		<custom-tab :value="4"></custom-tab>
	</view>
</template>

<script>
	import actItem from '../../components/actItem.vue';
	import customTab from '../../components/customTab.vue';
	export default {
		components: {
			actItem,
			customTab
		},
		data() {
			return {
				titleHeight: '',
				titleTops: '',
				datas: [{}],
				userRole: {},
				userInfo: uni.getStorageSync('userInfo'),
				contentTop: uni.getStorageSync('menuInfo').contentTop,
				menuList: [],
				notices:'',
				price:"",
				wonav:[],
				islogin:false,
				navs:[]
			}
		},

		onShow() {
				this.islogin=false
			if(uni.getStorageSync('logintoken')){
				this.islogin = true
				this.getUserInfo()
				this.notification()
			}else{
				this.$api.nologinindex().then(res=>{
					console.log(res)
					this.navs=res.data
				})
			}
			
			
		},
		methods: {
			toXyList(){
				uni.navigateTo({
					url:'/pages/contract/index'
				})
			},
			tourl(i) {
					
				if(i.status==0){
					this.showpop()
					return
				}
				uni.navigateTo({
					url:i.url
				})
			},

			login() {
				if (!uni.getStorageSync('logintoken')) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
			},
			to(url){
				
				uni.navigateTo({
					url:url+'?type='+this.userRole.tuijian_status
				})
			},
			uploadAvatar() {
				let vm = this
				uni.chooseImage({
					sourceType: ['album'],
					count: 1,
					success: function(res) {
						console.log(res)
						vm.$api.uploadImg({
							filePath: res.tempFilePaths[0]
						}).then(res => {
							if (res.data.fullurl) {
								vm.$api.editavatar({
									avatar: res.data.fullurl
								}).then(data => {
									vm.userInfo.avatar = res.data.fullurl
								})

							}

						})
					},
				})

			},
			notification(){
				this.$api.notification().then(res => {
					console.log(res)
					this.notices=res.data.notice_num? res.data.id:""
					
				})
				this.$api.indexwonav().then(res=>{
					console.log(res)
					this.wonav=res.data
				})
			},
			getUserInfo() {
				this.$api.userGroup().then(res => {
					console.log(res)
					
				})
				this.$api.userIndex().then(res => {
					console.log(res)
					this.menuList = res.data.wode_fuwu
					this.price = res.data.price
					this.userInfo = res.data.user_info
				})
				this.$api.jiaoseinfo().then(res => {
					console.log(res)
					this.userRole = res.data
				})
			},
			//跳往常见问题页面
			shareGoDetail(pageUrl) {

				uni.navigateTo({
					url: pageUrl
				})
			},
			contact() {

			},
			showpop() {
				uni.showModal({
					title: '提示',
					content: '功能正在开发中'
				})
			},
			toOrder(type) {
				uni.navigateTo({
					url: '/pages/order/index?type='+type
				})
			},
			towhOrder(type) {
				uni.navigateTo({
					url: '/pages/whOrder/index?type='+type
				})
			},
			toTx() {
				uni.navigateTo({
					url: '/pages/Withdrawals/index'
				})
			},
			tonotice(url){
				uni.navigateTo({
					url:url
				})
				// if(this.notices){
				// 	uni.navigateTo({
				// 		url:'/pages/shNoticeMain/index?id='+this.notices
				// 	})
				// }else{
					
						
				// }
			},
			toRecharge() {
				uni.navigateTo({
					url: '/pages/rechargeList/index'
				})
			},
			toXy(type) {
				uni.navigateTo({
						url: '/pages/about/index?type=' + type
				})
			},
			toServe(item){
					console.log(item)
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					}
				})
			},
			toWh(url){
				if(this.userRole.wanghong_status==1){
					uni.navigateTo({
						url:'/pages/shStatus/index'
					})
				}else if(this.userRole.wanghong_status==2){
					uni.navigateTo({
						url:url+"?type="+this.userRole.wanghong_status
					})
				}else{
					uni.navigateTo({
						url:url+"?type="+this.userRole.wanghong_status
					})
				}
			},
			toCHooseGoods(url){
				if(this.userRole.gys_status==1){
					uni.showModal({
						title: '提示',
						content: '账号已提交申请，请耐心等待后台审核'
					})
				}else if(this.userRole.gys_status==2){
					uni.navigateTo({
						url:url+"?type=2"
					})
				}else{
					uni.navigateTo({
						url:url
					})
				}
			},
			toregister(i){
				if(i.status=='1'){
					uni.navigateTo({
						url:'/pages/register/index?type='+i.url
					})
					
				}else{
					uni.showModal({
						title: '提示',
						content: '功能正在开发中'
					})
				}
					
			}
		
		}
	}
</script>

<style scoped lang="scss">
	.mineBox {
		position: relative;


		.titleText {
			position: relative;
			z-index: 22;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.contentBox {
			position: relative;
			z-index: 22;

			.w100 {
				position: absolute;
				top: 0;
				left: 0;
			}


			.authBox {
				margin-left: 33rpx;
				margin-bottom: 42rpx;
				display: flex;
				position: relative;

				.imgBox {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;


					image {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
					}
				}

				.personInfo {
					margin-left: 20rpx;

					.nickText {
						font-size: 36rpx;
						color: #222;
						font-weight: bold;
						margin: 10rpx 0rpx 20rpx 0rpx;
					}

					.userGrade {
						min-width: 130rpx;
						height: 36rpx;
						background: linear-gradient(90deg, #BD8B50, #EDD68A);
						border-radius: 18rpx;
						font-weight: 400;
						font-size: 20rpx;
						margin-left: 30rpx;
						color: #FFFFFF;

						image {
							width: 50rpx;
							height: 42rpx;
							margin-left: -20rpx;
							margin-right: 10rpx;
						}
					}

					.nameText {
						font-weight: 500;
						font-size: 32rpx;
						color: #222222;

						text {
							position: relative;
							top: -4rpx;
							margin: 0rpx 8rpx 0rpx;
						}
					}
				}
			}

			.cardBox {
				width: 706rpx;
				height: 260rpx;
				background: #FFFFFF;
				border-radius: 15rpx;
				background: #FFFFFF;
				padding-top: 34rpx;
				margin: 20rpx auto 24rpx;

				.title {
					font-weight: bold;
					font-size: 35rpx;
					color: #222;
					margin: 0 0 30rpx 26rpx;
				}

				.cardItem {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					color: #555555;
					line-height: 28rpx;

					image {
						width: 48rpx;
						height: 48rpx;
						margin: 0 0 20rpx 0;
					}
				}
			}

		}
	}

	.Commission {
		width: 706rpx;
		height: 230rpx;
		background: #3F7865;
		border-radius: 15rpx;
		color: #fff;
		font-weight: bold;
		font-size: 35rpx;
		color: #FFFFFF;
		position: relative;
		margin: 0 auto 20rpx;
		padding: 40rpx 30rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.action {
			min-width: 138rpx;
			height: 48rpx;
			background: #FFFFFF;
			margin-left: 12rpx;
			border-radius: 24rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			text-align: center;
			line-height: 48rpx;
		}
	}

	.shareCard {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		margin: 21rpx auto;
		// padding: 40rpx 30rpx;
		position: relative;

		z-index: 99;

		.shareItem {
			display: flex;

			height: 110rpx;
			align-items: center;
			margin: 0 11rpx 0 26rpx;
			border-bottom: 1rpx solid #E7E7E7;

			image {
				width: 45rpx;
				height: 45rpx;
				margin-right: 16rpx;
			}

		}

		// .shareItem:last-child {
		// 	border: none;
		// }
	}
	.newMes{
		width: 12rpx;
		height: 12rpx;
		display: block;
		border-radius: 50%;
		top: 0;
		right: 0;
		background-color: red;
	}
</style>